---
id: menu
slug: react-menu
hide_title: true
sidebar_label: Menu
title: React Menu
description: A simple Menu example with reactjs-popup
---

import SimpleMenu from './../examples/SimpleMenu.js';

# React Menu

You can create a nested menu with reactjs-popup easily as the following example shows.

<SimpleMenu />

```jsx
const Menu = () => (
  <div className="menu">
    <div className="menu-item"> Menu item 1</div>
    <div className="menu-item"> Menu item 2</div>
    <div className="menu-item"> Menu item 3</div>
    <Popup
      trigger={<div className="menu-item"> Sub menu </div>}
      position="right top"
      on="hover"
      closeOnDocumentClick
      mouseLeaveDelay={300}
      mouseEnterDelay={0}
      contentStyle={{ padding: '0px', border: 'none' }}
      arrow={false}
    >
      <div className="menu">
        <div className="menu-item"> item 1</div>
        <div className="menu-item"> item 2</div>
        <div className="menu-item"> item 3</div>
      </div>
    </Popup>
    <div className="menu-item"> Menu item 4</div>
  </div>
);
```

```css
.menu {
  width: 200px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.menu-item {
  cursor: pointer;
  padding: 5px;
  height: 28px;
  border-bottom: 1px solid rgb(187, 187, 187);
}
.menu-item:hover {
  color: #2980b9;
}
```
